<template>
  <div class="comprehensive-form-container">
    <el-page-header @back="goBack()" />
    <el-form
      ref="formRef"
      v-loading="data.loading"
      class="demo-form"
      :disabled="data.disabled"
      label-width="100px"
      :model="data.form"
    >
      <el-form-item label="应用">
        <el-radio-group v-model="data.form.app">
          <el-radio-button
            v-for="item in data.meta.apps"
            :key="item"
            :label="item"
          />
        </el-radio-group>
      </el-form-item>

      <el-form-item label="角色名称" prop="name">
        <el-input v-model="data.form.name" placeholder="中文名称" />
      </el-form-item>
      <el-form-item label="角色代码" prop="code">
        <el-input v-model="data.form.code" placeholder="英文代码" />
      </el-form-item>
      <el-form-item label="菜单权限" prop="code">
        <el-tree
          ref="treeRef"
          :data="data.meta.menus"
          :default-checked-keys="data.form.checked_menus"
          multiple
          node-key="id"
          show-checkbox
          @check="nodeCheck"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('formRef')">
          保存
        </el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
  import useForm from '@/hooks/useForm'
  import { concat } from 'lodash'
  const { formRef, data, resetForm, submitForm, goBack } = useForm({
    res: 'role',
    meta: true,
  })
  const treeRef = ref()

  function nodeCheck(node, checkedData) {
    data.form.menus = concat(
      checkedData.checkedKeys,
      checkedData.halfCheckedKeys
    )
  }
</script>
